- title '我的计划项'
.row#plans-list
  %draggable{':list' => "filterData", ':options' => "{ animation: 150, 'handle': '.plan-item' }", '@update' => 'updateSort'}
    .col-md-3{'v-for' => 'plan in filterData', ':key'=> 'plan.ident'}
      .plan-item{':value' => 'plan.path'}
        %a{':href' => 'plan.path'}
          .bs-callout{':class' => 'plan.color_tag_class'}
            %h4
              {{plan.title}}
            %p
              {{plan.description}}
        %i.icon-pencil.has-tooltip.modify-plan{ title: '修改此计划项', 'v-on:click' => 'editPlan()' }
      .bs-callout.edit-plan{':class' => 'plan.color_tag_class', ':value' => 'plan.color_tag'}
        = render 'plans/edit_form'
  .col-md-3{ 'v-show' => 'newPlanField' }
    .bs-callout.bs-callout-add#add-plan-field
      = render 'plans/form'
    .add-plan-buttons
      %button.btn.btn-sm.btn-default{ :type => "button", 'v-on:click' => 'cancelPlan()' } 取消
      %button.btn.btn-sm.btn-primary{ :type => "button", 'v-on:click' => 'addPlan()' } 提交
  .col-md-3{ 'v-show' => '!!!newPlanField' }
    .bs-callout.bs-callout-add#add-plan-entry{ 'v-on:click' => 'newPlan()' }
      %i.icon-plus.bs-callout-add-icon

:javascript
  var PlanUrl = '/p.json'
  var plans_list = new Vue({
    el: '#app',
    data: {
      plan: {
        title: '',
        description: '',
        color_tag: 0
      },
      plans: [{
        id: '',
        ident: '',
        title: '',
        description: '',
        color_tag: '',
        color_tag_class: '',
        path: ''
      }],
      newPlanField: false,
      colorFilter: ''
    },
    created: function () {
      this.fetchData()
    },
    beforeUpdate: function () {
      $('.overlay-loading').hide()
    },
    computed: {
      filterData: function() {
        var data = this.plans
        var filterArray = []
        var filterStr = this.colorFilter
        if ( filterStr == ''){
          return data
        }else{
          for (var i = 0; i < data.length; i++){
            if ( data[i].color_tag == filterStr ){
              filterArray.push(data[i])
            }
          }
          return filterArray
        }
      }
    },
    methods: {
      fetchData: function () {
        var xhr = new XMLHttpRequest()
        var self = this
        xhr.open('GET', PlanUrl)
        xhr.onload = function () {
          self.plans = JSON.parse(xhr.responseText)
        }
        xhr.send()
      },
      newPlan: function () {
        this.newPlanField = true
      },
      cancelPlan: function () {
        this.newPlanField = false
      },
      editPlan: function () {
        $(event.currentTarget).closest('.col-md-3').find('.plan-item').hide()
        $(event.currentTarget).closest('.col-md-3').find('.edit-plan').show()
      },
      cancelEdit: function () {
        $(event.currentTarget).closest('.edit-plan').hide()
        $(event.currentTarget).closest('.col-md-3').find('.plan-item').show()
      },
      selectColor: function (color, action){
        var fieldBorder;
        if (action == 'new') {
          fieldBorder = $('#add-plan-field')
        }else{
          fieldBorder = $(event.currentTarget).closest('.edit-plan')
          evt = $(event.currentTarget)
          evt.closest('.edit-plan').attr('value', evt.attr('value'))
        }
        fieldBorder.css({'border-left-color': color})
      },
      submitEditPlan: function(ident) {
        var xhr = new XMLHttpRequest()
        var titleInput = $(event.currentTarget).closest('.plan').find('.edit-plan-title').val()
        var self = this
        evt = $(event.currentTarget)
        if (titleInput == ''){
          return notifyTop('计划项名称不能为空', 'warning');
        }
        var titleDesc = $(event.currentTarget).closest('.plan').find('.edit-plan-description').val()
        var colorTag = evt.closest('.edit-plan').attr('value')

        var url = '/p/' + ident + '.json'
        xhr.open("PUT", url)
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.onload = function () {
          result = JSON.parse(xhr.responseText)
          evt.closest('.col-md-3').find('.plan-item').show()
          evt.closest('.edit-plan').hide()
          notifyTop('计划项修改成功!')
          for (var i = 0; i < self.plans.length; i++){
            if ( self.plans[i].ident == ident ){
              self.plans.splice(i,1,result)
            }
          }
        }
        xhr.send( "plan[title]="+ titleInput + "&plan[description]=" + titleDesc + "&plan[color_tag]=" + colorTag )
      },
      addPlan: function () {
        var xhr = new XMLHttpRequest()
        var self = this
        if (this.plan.title == ''){
          $('#title').css({'border-color':'#d9534f'})
          return notifyTop('计划项名称不能为空', 'warning');
        }
        xhr.open("POST", PlanUrl)
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.onload = function () {
          if (typeof(result) != 'undefined' && typeof(result.status) != 'undefined' && result.status == 'failed'){
            self.newPlanField = false
            notifyTop(result.message)
          }else{
            result = JSON.parse(xhr.responseText)
            self.plans.push(result)
            self.newPlanField = false
            notifyTop('计划项 ' + self.plan.title + ' 创建成功!')
            self.plan.title = ''
            self.plan.description = ''
            $('#title').css({'border-color':'#ccc'})
          }
        }
        xhr.send( "plan[title]="+ this.plan.title + "&plan[description]=" + this.plan.description + "&plan[color_tag]=" + this.plan.color_tag )
      },
      updateSort: function() {
        var updateSortUrl = '/p/update_sort.json'
        var xhr = new XMLHttpRequest()
        var sort = this.plans.map(function(item) {return item.id})
        xhr.open("PUT", updateSortUrl)
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.send( "sort=" + sort )
      }
    }
  })
